<template>
  <section>
    <el-card shadow="never">
      <div slot="header" class="is-size-4 has-text-weight-bold">
        {{$t('common.personalInformation')}}
      </div>
      <div class="columns">
        <div class="column is-full">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('common.basic')" name="first">
              <el-form :label-position="labelPosition" label-width="100px" :model="user">
                <el-form-item :label="$t('common.username')">
                  <el-input v-model="user.username" disabled />
                </el-form-item>
                <el-form-item :label="$t('common.alias')">
                  <el-input v-model="user.alias" />
                </el-form-item>
                <el-form-item :label="$t('common.bio')">
                  <el-input v-model="user.bio" />
                </el-form-item>
                  <el-form-item :label="$t('common.avatar')">
                  <el-avatar shape="square" :size="80" :src="`https://cn.gravatar.com/avatar/${this.user.id}?s=164&d=identicon`"></el-avatar>
                </el-form-item>
                <el-form-item
                  prop="email"
                  :label="$t('common.email')"
                  :rules="[
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                  ]"
                >
                  <el-input v-model="user.email"   disabled/>
                </el-form-item>

                 <el-form-item :label="$t('common.mobile')">
                  <el-input v-model="user.mobile" />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">{{$t('common.submit')}}</el-button>
                  <el-button @click="resetForm('ruleForm')">{{$t('common.reset')}}</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane :label="$t('common.changePassword')" name="second">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" :label-position="labelPosition" label-width="130px" >
                  <el-form-item :label="$t('common.oldPassword')" prop="usedPass">
                      <el-input type="password" v-model="ruleForm.usedPass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('common.newPassword')" prop="pass">
                      <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('common.checkPassword')" prop="checkPass">
                      <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="change('ruleForm')">{{$t('common.submit')}}</el-button>
                    <el-button @click="resetPass('ruleForm')">{{$t('common.reset')}}</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
</section>
</template>

<script>
import {getInfo,update,changePassword} from '@/api/user'

export default {
  name: 'Setting',
  data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };


    return {
      activeName: 'first',
      labelPosition: 'left',
      user: {
        id: '',
        username: '',
        alias: '',
        bio: '',
        email: '',
        mobile: '',
        avatar: ''
      },
      ruleForm: {
          usedPass:'',
          pass: '',
          checkPass: '',
          
        },
        rules: {
          pass: [
            
          { required: true, message: '请输入修改后密码', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur'
          }
        
          ],
          checkPass: [
            { required: true,validator: validatePass2, trigger: 'blur' }
          ],
          
          usedPass:[
            { required: true, message: '请输入初始密码', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur'
          }
          ]
        }
    }
  },
  created() {
    this.fetchInfo()
  },
  methods: {
    fetchInfo() {
      getInfo(this.$route.params.username).then(res => {
        console.log(res)
        const { data } = res
        this.user = data
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    submitForm(formName) {
      update(this.user).then(res => {
        this.$message.success('信息修改成功')
        this.fetchInfo()
      })
    },
    change(formName){this.$refs[formName].validate((valid) => {
        if (valid) {
        changePassword(this.ruleForm).then(res => {
          this.$message.success('密码修改成功')
          this.$store.dispatch('user/logout').then(() => {
          this.$message.info('请重新登录')
          setTimeout(() => {
            this.$router.push({ path: this.redirect || '/login' })
          }, 500)
      })
      })
    }})
    },
    resetForm() {
      this.fetchInfo();
      
    },
    resetPass(formName){
       this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
